<template>
	<view class="swiper-con">
		<uni-swiper-dot :info="srcList" :current="current" mode="nav" field="field">
			<swiper class="swiper" :style="{height:(screenWidth/8)*9+'rpx'}" autoplay="true" @change="change">
				<swiper-item v-for="(item,index) in srcList" :key="index" class="swiper-item">
					<image class="swiper-item-image" :src="item.src" @click="click(item.id)" mode="center"></image>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
	</view>
</template>

<script>
	export default {
		props:{
			goodsList:{
				type:Array
			}
		},
		data() {
			return {
				screenWidth: 375,
				srcList: [{},{},{}],
				current: 0,
				
			};
		},
		created() {
			var vue =this
			uni.showLoading({
			})
			vue.buildSrcList(vue.goodsList)
			uni.hideLoading()
		},
		methods: {
			//从所有商品中构建随机的轮播图
			buildSrcList(goodsList){
				var temp;
				var history;
				var showGoods;
				for(var i = 0;i<this.srcList.length;i++){
					temp = Math.floor(Math.random()*goodsList.length);
					//console.log("temp=%s",temp);
					if(i > 0 && temp === history){
						i--;
						continue;
					}	
					showGoods = {
						id:goodsList[temp].id,
						src:this.$urlPrefix + goodsList[temp].mainImages[0],
						field:goodsList[temp].title
					}
					this.$set(this.srcList,i,showGoods)
					history = temp
				}
			},
			change(e) {
				this.current = e.detail.current
			},
			click(id){
				uni.navigateTo({
					url:"/pages/goods-detail/goods-detail?id="+id
				})
			}
		}
	}
</script>

<style lang="scss">
	.swiper-con {
		.swiper {
			.swiper-item {
				box-sizing: border-box;
				border-radius: 20rpx;
				padding: 10rpx;

				.swiper-item-image {
					width: 100%;
					height: 100%;

					border-radius: 20rpx;
				}
			}
		}
	}
</style>
